<template>
	<!-- 分销商充值 -->
	<div>
		<a-row type="flex" :gutter="24">
			<a-col :span="24" :xxl="6" :xl="8" :lg="12" :sm="12" class="mb-24" v-for="item in dealerData" :key="'card_' + item.id">
				<a-card :bordered="false" class="header-solid h-full" :bodyStyle="{ padding: '24px 16px' }">
					<div class="body_box">
						<div class="flex-csb">
							<span class="text-primary text-sm font-bold">{{ item.name }}</span>
							<span class="text-primary text-sm font-bold">有效期：{{ item.expire_text }}</span>
						</div>
						<div class="flex-csb mt-5 mb-10">
							<h5>直推分润：{{ Number(item.direct) }}%</h5>
							<h5>间推分润：{{ Number(item.indirect) }}%</h5>
						</div>
						<div class="text-gray-7 mb-30">
							<p class="text-sm mb-5" v-for="content in item.content" :key="'content_' + content.id">{{ content.text }}</p>
						</div>
						<a-button type="primary" shape="round" block style="height: 50px; font-size: 14px" @click="shopNow(item)">立即购买{{ item.price }}￥</a-button>
						<p class="text-primary font-bold text-center text-line mt-5 mb-5">{{ item.original_price }}￥</p>
					</div>
				</a-card>
			</a-col>
		</a-row>
		<PayModal :showModal="showModal" payType="dealer" :prepayData="prepay" @hideModal="showModal = false"></PayModal>
	</div>
</template>

<script>
	import PayModal from "./PayModal.vue"
	export default {
		components: {
			PayModal
		},
		data() {
			return {
				dealerData: [],
				prepay: {},
				showModal: false
			}
		},
		created() {
			this.getDealerList()
		},
		methods: {
			// 立即购买
			shopNow(item) {
				this.prepay = {
					id: item.id,
					title: item.name + " " + item.expire_text,
					price: item.price
				}
				this.showModal = true
			},
			// 获取经销商列表
			getDealerList() {
				this.$http("recharge.dealerList").then(res => {
					if (res.code === 1) {
						if (res.data.list && res.data.list.length) {
							res.data.list.map(item => {
								if (item.content) {
									let id = 0
									let arr = []
									for (let key in item.content) {
										id++
										arr.push({
											id,
											text: item.content[key]
										})
									}
									item.content = arr
								}
							})
							this.dealerData = res.data.list
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped></style>
